<template>
  <div class="main">
      <!-- 欢迎页面 -->
    <div class="box" v-if="!showLogin">
      <div class="main-box">
        <van-circle
          :clockwise="false"
          v-model="currentRate"
          :rate="100"
          :speed="100"
          :text="Math.ceil(currentRate / 20) + 's'"
          @click.native="btnEvt"
          size="45px"
        />
      </div>
    </div>
    <!-- login页面 -->
    <div class="login" v-else>
        <span>

        </span>
 <van-form @submit="onSubmit">
    <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
    />
    <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
    </div>
   </van-form>
    <p class="footer">此广告位正在招租，买不了吃亏，买不了上当，质量杠杠的，就是棒</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRate: 100,
      timer: null,
      showLogin: false,
      username:'',
      password: '',
    };
  },
  created() {
    this.backTime();
  },
  methods: {
    //  倒计时
    backTime() {
      this.timer = setTimeout(() => {
        this.currentRate -= 1;
        if (this.currentRate > 0) {
          this.backTime();
        } else {
          this.showLogin = true;
        }
      }, (5 * 1000) / 100);
    },
    // 点击倒计时进入登录页面
    btnEvt() {
        clearTimeout(this.timer)
        this.showLogin = true
    },
    // 登录页面
    onSubmit(){
     let token=this.$store.getters['common/token']
      console.log(token)
      if(!!token){
          this.$router.push('/home')
      }
    
    }
  },
};
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  > .box {
    width: 100%;
    height: 100%;
    background: url("../../image/logo.png") center center / 375px no-repeat;
    > .main-box {
      display: block;
      position: absolute;
      right: 10px;
      top: 5px;
      width: 50px;
      height: 50px;
      .van-count-down {
        line-height: 45px;
      }
    }
  }
  >.login{
    width: 100%;
    height: 100%;
    position: relative;
    >span{
        display: block;
        position: relative;
        width: 80%;
        margin: 0 auto;
        height: 27%;
        top:5%;
       background: url('../../image/header.png') center center /300px  no-repeat;
    }
      >.van-form{
       position: relative;
       top: 15%;
       left:5%;
       transform:translate(-5%,-10%);
      }
      >.footer{
           width: 100%;
          display: block;
          position: fixed;
          bottom: 10px;
          font-size: .6rem;
          text-align: center;
          color: rgb(175, 174, 174);
      }
  }
}
</style>